import React, { useState, useEffect, useMemo } from 'react';
import { Download, Trash2, MapPin, Languages, Wifi, WifiOff, X, AlertCircle, CheckCircle, FileText, Globe, Search, Filter, Info, ChevronDown, ChevronUp, Clock, ArrowRight, Menu, ExternalLink } from 'lucide-react';
import useOfflineContentService from '../services/offline-content-service';
import { motion, AnimatePresence, useAnimation } from 'framer-motion';
import './offline-content.css';


// 定义内容类型枚举
enum ContentType {
  MAP = 'map',
  TRANSLATION = 'translation',
  GUIDE = 'guide'
}

// 定义内容类型图标和颜色映射
const contentTypeConfig = {
  [ContentType.MAP]: {
    icon: MapPin,
    color: 'blue',
    text: '离线地图'
  },
  [ContentType.TRANSLATION]: {
    icon: Languages,
    color: 'green',
    text: '翻译包'
  },
  [ContentType.GUIDE]: {
    icon: Globe,
    color: 'purple',
    text: '旅行指南'
  }
};

const OfflineContentPage: React.FC = () => {
  const [isOnline, setIsOnline] = useState(true);
  const [filter, setFilter] = useState<ContentType | 'all'>('all');
  const [searchTerm, setSearchTerm] = useState('');
  const [expandedCategory, setExpandedCategory] = useState<ContentType | 'all'>('all');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const controls = useAnimation();
  const { content, downloadContent, deleteContent, cancelContentDownload, getStorageUsage, isDownloading, isLoading, error } = useOfflineContentService();

  const storage = getStorageUsage();
  const isStorageLow = storage.usedPercentage > 80;

  // 监听屏幕尺寸变化
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth > 768) {
        setIsMobileMenuOpen(false);
      }
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // 页面加载动画
  useEffect(() => {
    controls.start('visible');
  }, [controls]);

  // 根据筛选和搜索条件过滤内容
  const filteredContent = useMemo(() => {
    return content
      .filter(item => filter === 'all' || item.type === filter)
      .filter(item => item.name.toLowerCase().includes(searchTerm.toLowerCase()));
  }, [content, filter, searchTerm]);

  // 按类型分组内容
  const contentByType = useMemo(() => {
    return filteredContent.reduce((acc, item) => {
      if (!acc[item.type]) {
        acc[item.type] = [];
      }
      acc[item.type].push(item);
      return acc;
    }, {} as Record<string, typeof content>);
  }, [filteredContent]);

  // 切换展开/折叠分类
  const toggleCategory = (type: ContentType | 'all') => {
    setExpandedCategory(expandedCategory === type ? 'none' : type);
  };

  // 获取类型配置
  const getTypeConfig = (type: string) => {
    return contentTypeConfig[type as ContentType] || {
      icon: FileText,
      color: 'gray',
      text: '其他内容'
    };
  };

  return (
    <div className="min-h-screen bg-gray-50 py-8 page-container dark:bg-gray-900 transition-colors duration-300">
      <div className="content-centered max-w-4xl mx-auto px-4">
        <motion.div 
          variants={{ hidden: { opacity: 0, y: -20 }, visible: { opacity: 1, y: 0 } }}
          initial="hidden"
          animate={controls}
          transition={{ duration: 0.5 }}
          className="text-center mb-8"
        >
          <h1 className="text-[clamp(1.8rem,5vw,3rem)] font-bold text-gray-900 mb-3 text-balance dark:text-white">离线内容</h1>
          <p className="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">下载离线地图、翻译包和旅行指南，随时随地使用旅行助手，不受网络限制</p>
        </motion.div>

        {/* 网络状态卡片 */}
        <motion.div 
          variants={{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }}
          initial="hidden"
          animate={controls}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="offline-mode-toggle bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4 mb-6 transition-all hover:shadow-md border border-gray-100 dark:border-gray-700"
        >
          <div className="flex items-center justify-between flex-wrap gap-3">
            <div className="flex items-center">
              {isOnline ? (
                <motion.div
                  animate={{ rotate: [0, 15, -15, 0] }}
                  transition={{ duration: 2, repeat: Infinity, repeatDelay: 5 }}
                >
                  <Wifi className="h-5 w-5 text-green-500 mr-2" />
                </motion.div>
              ) : (
                <WifiOff className="h-5 w-5 text-red-500 mr-2" />
              )}
              <span className="font-medium text-gray-900 dark:text-white">
                {isOnline ? '已连接网络' : '离线模式'}
              </span>
            </div>
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => setIsOnline(!isOnline)}
              className="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-800"
            >
              {isOnline ? '切换到离线模式' : '连接网络'}
            </motion.button>
          </div>
        </motion.div>

        {/* 加载状态和错误提示 */}
        <AnimatePresence>
          {isLoading && (
            <motion.div 
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-6 text-center border border-gray-100 dark:border-gray-700"
            >
              <div className="inline-block animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-500 mb-3"></div>
              <p className="text-gray-600 dark:text-gray-300">加载离线内容中...</p>
            </motion.div>
          )}
        </AnimatePresence>

        <AnimatePresence>
          {error && (
            <motion.div 
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-xl p-4 mb-6"
            >
              <div className="flex flex-col md:flex-row md:items-start gap-3">
                <AlertCircle className="h-5 w-5 text-red-400 mr-2 flex-shrink-0 mt-0.5" />
                <div>
                  <h3 className="text-sm font-medium text-red-800 dark:text-red-300">
                    加载失败
                  </h3>
                  <p className="text-sm text-red-700 dark:text-red-400 mt-1">
                    {error}
                  </p>
                  <button
                    onClick={() => window.location.reload()}
                    className="mt-3 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                  >
                    重试
                  </button>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        {/* 搜索和筛选 */}
        <motion.div 
          variants={{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }}
          initial="hidden"
          animate={controls}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="offline-search-container bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4 mb-6 border border-gray-100 dark:border-gray-700"
        >
          <div className="flex flex-wrap gap-4">
            <div className="relative flex-grow w-full">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <input
                type="text"
                placeholder="搜索离线内容..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition-all"
              />
            </div>
            
            {/* 移动端筛选按钮 */}
            <button 
              className="md:hidden flex items-center gap-1 px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded-md text-sm font-medium"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              <Filter className="h-4 w-4" />
              <span>筛选</span>
              {isMobileMenuOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
            </button>
            
            {/* 桌面端筛选按钮 */}
            <div className="hidden md:flex gap-2">
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => setFilter('all')}
                className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${filter === 'all' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'}`}
              >
                全部
              </motion.button>
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => setFilter(ContentType.MAP)}
                className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${filter === ContentType.MAP ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'}`}
              >
                <MapPin className="inline h-3.5 w-3.5 mr-1" /> 地图
              </motion.button>
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => setFilter(ContentType.TRANSLATION)}
                className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${filter === ContentType.TRANSLATION ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'}`}
              >
                <Languages className="inline h-3.5 w-3.5 mr-1" /> 翻译包
              </motion.button>
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => setFilter(ContentType.GUIDE)}
                className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${filter === ContentType.GUIDE ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'}`}
              >
                <Globe className="inline h-3.5 w-3.5 mr-1" /> 指南
              </motion.button>
            </div>
          </div>
          
          {/* 移动端筛选菜单 */}
          <AnimatePresence>
            {isMobileMenuOpen && (
              <motion.div
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: 'auto' }}
                exit={{ opacity: 0, height: 0 }}
                className="md:hidden mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 flex flex-col gap-2"
              >
                <button
                  onClick={() => {
                    setFilter('all');
                    setIsMobileMenuOpen(false);
                  }}
                  className={`px-3 py-2 rounded-md text-left text-sm font-medium transition-colors ${filter === 'all' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'}`}
                >
                  全部
                </button>
                <button
                  onClick={() => {
                    setFilter(ContentType.MAP);
                    setIsMobileMenuOpen(false);
                  }}
                  className={`px-3 py-2 rounded-md text-left text-sm font-medium transition-colors ${filter === ContentType.MAP ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'}`}
                >
                  <MapPin className="inline h-4 w-4 mr-2" /> 地图
                </button>
                <button
                  onClick={() => {
                    setFilter(ContentType.TRANSLATION);
                    setIsMobileMenuOpen(false);
                  }}
                  className={`px-3 py-2 rounded-md text-left text-sm font-medium transition-colors ${filter === ContentType.TRANSLATION ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'}`}
                >
                  <Languages className="inline h-4 w-4 mr-2" /> 翻译包
                </button>
                <button
                  onClick={() => {
                    setFilter(ContentType.GUIDE);
                    setIsMobileMenuOpen(false);
                  }}
                  className={`px-3 py-2 rounded-md text-left text-sm font-medium transition-colors ${filter === ContentType.GUIDE ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'}`}
                >
                  <Globe className="inline h-4 w-4 mr-2" /> 旅行指南
                </button>
              </motion.div>
            )}
          </AnimatePresence>
        </motion.div>

        {/* 存储空间信息 */}
        <motion.div 
          variants={{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }}
          initial="hidden"
          animate={controls}
          transition={{ duration: 0.5, delay: 0.3 }}
          className={`storage-info-container bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 mb-6 transition-all hover:shadow-md border border-gray-100 dark:border-gray-700 ${isStorageLow ? 'border-2 border-amber-500' : ''}`}
        >
          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-3">
            <h2 className="text-xl font-medium text-gray-900 dark:text-white text-balance">存储空间</h2>
            {isStorageLow && (
              <motion.div 
                animate={{ scale: [1, 1.05, 1] }}
                transition={{ duration: 2, repeat: Infinity }}
                className="flex items-center text-amber-600 dark:text-amber-400 text-sm"
              >
                <AlertCircle className="h-4 w-4 mr-1" />
                <span>存储空间不足</span>
              </motion.div>
            )}
          </div>
          <div className="space-y-4">
            <div className="flex flex-wrap justify-between gap-2 items-center text-sm">
              <span className="text-gray-600 dark:text-gray-300">已使用</span>
              <span className="font-medium text-gray-900 dark:text-white">{storage.used.toFixed(1)} MB / {storage.total} MB ({storage.usedPercentage.toFixed(0)}%)</span>
            </div>
            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
              <motion.div 
                initial={{ width: 0 }}
                animate={{ width: `${storage.usedPercentage}%` }}
                transition={{ duration: 1, delay: 0.5 }}
                className={`h-3 rounded-full transition-all duration-500 ${isStorageLow ? 'bg-amber-500' : 'bg-blue-600'}`}
              ></motion.div>
            </div>
            <div className="flex flex-wrap justify-between gap-4 text-sm text-gray-500 dark:text-gray-400">
              <div className="flex items-center gap-1.5">
                <div className="w-3 h-3 rounded-full bg-blue-600 dark:bg-blue-500"></div>
                <span>已用: {(storage.used).toFixed(1)} MB</span>
              </div>
              <div className="flex items-center gap-1.5">
                <div className="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600"></div>
                <span>可用: {(storage.total - storage.used).toFixed(1)} MB</span>
              </div>
              <div className="flex items-center gap-1.5">
                <div className="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500"></div>
                <span>总计: {storage.total} MB</span>
              </div>
            </div>
            {isStorageLow && (
              <motion.div
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.5 }}
                className="mt-3 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-lg"
              >
                <div className="flex items-start gap-2.5">
                  <AlertCircle className="h-5 w-5 text-amber-500 flex-shrink-0 mt-0.5" />
                  <p className="text-sm text-amber-800 dark:text-amber-300">
                    存储空间不足，建议删除不需要的离线内容以释放空间。
                  </p>
                </div>
              </motion.div>
            )}
          </div>
        </motion.div>

        {/* 内容列表 */}
        <motion.div 
          variants={{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }}
          initial="hidden"
          animate={controls}
          transition={{ duration: 0.5, delay: 0.4 }}
          className="available-content-container bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden border border-gray-100 dark:border-gray-700"
        >
          <div className="p-6 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850/50">
            <h2 className="text-xl font-medium text-gray-900 dark:text-white text-balance">可用离线内容</h2>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
              共 {filteredContent.length} 项
            </p>
          </div>

          {Object.keys(contentByType).length > 0 ? (
            Object.keys(contentByType).map((type) => {
              const config = getTypeConfig(type);
              const Icon = config.icon;
              return (
                <div key={type} className="border-b border-gray-200 dark:border-gray-700 last:border-0">
                  <motion.button
                    whileHover={{ backgroundColor: 'rgba(249, 250, 251, 0.8)' }} // light hover
                    className="w-full p-4 text-left flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-750"
                    onClick={() => toggleCategory(type as ContentType)}
                  >
                    <div className="flex items-center">
                      <div className={`p-2 rounded-lg bg-${config.color}-100 text-${config.color}-800 dark:bg-${config.color}-900 dark:text-${config.color}-200 mr-3`}>
                        <Icon className="h-5 w-5" />
                      </div>
                      <h3 className="text-lg font-medium text-gray-900 dark:text-white">
                        {config.text} ({contentByType[type].length})
                      </h3>
                    </div>
                    {expandedCategory === type ? (
                      <ChevronUp className="h-5 w-5 text-gray-500 dark:text-gray-400" />
                    ) : (
                      <ChevronDown className="h-5 w-5 text-gray-500 dark:text-gray-400" />
                    )}
                  </motion.button>

                  <AnimatePresence>
                    {expandedCategory === type && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: 'auto', opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.3 }}
                        className="overflow-hidden"
                      >
                        <div className="divide-y divide-gray-200 dark:divide-gray-700">
                          {contentByType[type].map((item) => (
                            <motion.div 
                              key={item.id}
                              initial={{ opacity: 0, y: 10 }}
                              animate={{ opacity: 1, y: 0 }}
                              transition={{ duration: 0.3 }}
                              className="p-4 hover:bg-gray-50 dark:hover:bg-gray-750"
                            >
                              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                                <div className="flex-1 min-w-0">
                                  <div className="flex items-start">
                                    <div className="hidden md:flex h-10 w-10 rounded-lg bg-gray-100 dark:bg-gray-700 items-center justify-center mr-4 shrink-0">
                                      <Icon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
                                    </div>
                                    <div className="flex-1">
                                      <div className="flex items-center gap-2 mb-0.5">
                                        <h3 className="text-base font-medium text-gray-900 dark:text-white truncate">
                                          {item.name}
                                        </h3>
                                        {item.isRecommended && (
                                          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200">
                                            推荐
                                          </span>
                                        )}
                                      </div>
                                      <div className="flex flex-wrap items-center mt-1 text-sm gap-x-3 gap-y-1 text-gray-500 dark:text-gray-400">
                                        <span>{item.size}</span>
                                        <span className="flex items-center gap-1"><Clock className="h-3.5 w-3.5" /> {item.lastUpdated}</span>
                                        {item.isNew && (
                                          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                            新增
                                          </span>
                                        )}
                                      </div>
                                    </div>
                                  </div>
                                </div>

                                <div className="flex-shrink-0 w-full md:w-auto flex flex-col md:flex-row gap-2 md:items-center">
                                  {item.downloaded ? (
                                    <div className="flex items-center space-x-2 w-full md:w-auto">
                                      <span className="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 flex-1 md:flex-none text-center">
                                        <CheckCircle className="h-4 w-4 mr-1.5 inline" /> 已下载
                                      </span>
                                      <motion.button 
                                        whileHover={{ scale: 1.1 }} 
                                        whileTap={{ scale: 0.95 }}
                                        className="p-2 text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20 rounded-lg transition-colors"
                                        onClick={() => deleteContent(item.id)}
                                      >
                                        <Trash2 className="h-4 w-4" />
                                      </motion.button>
                                    </div>
                                  ) : isDownloading(item.id) ? (
                                    <div className="flex items-center space-x-2 w-full py-1">
                                      <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mr-2">
                                        <motion.div 
                                          initial={{ width: 0 }}
                                          animate={{ width: `${item.progress || 0}%` }}
                                          transition={{ duration: 0.5 }}
                                          className="bg-blue-600 h-2.5 rounded-full"
                                        ></motion.div>
                                      </div>
                                      <span className="text-sm text-gray-600 dark:text-gray-300 whitespace-nowrap min-w-[30px]">
                                        {item.progress || 0}%
                                      </span>
                                      <motion.button 
                                        whileHover={{ scale: 1.1 }} 
                                        whileTap={{ scale: 0.95 }}
                                        className="p-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                        onClick={() => cancelContentDownload(item.id)}
                                      >
                                        <X className="h-4 w-4" />
                                      </motion.button>
                                    </div>
                                  ) : (
                                    <motion.button 
                                      whileHover={{ scale: 1.03 }}
                                      whileTap={{ scale: 0.97 }}
                                      className="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 disabled:bg-gray-300 dark:disabled:bg-gray-600 transition-colors w-full md:w-auto"
                                      disabled={!isOnline}
                                      onClick={() => downloadContent(item.id)}
                                    >
                                      <Download className="h-4 w-4 mr-2" />
                                      下载
                                    </motion.button>
                                  )}
                                </div>
                              </div>
                            </motion.div>
                          ))}
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              );
            })
          ) : (
            <div className="p-8 text-center">
              <FileText className="h-12 w-12 mx-auto text-gray-400 dark:text-gray-500 mb-3" />
              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-1">没有找到内容</h3>
              <p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
                尝试调整筛选条件或搜索关键词，或连接网络获取更多内容
              </p>
              {!isOnline && (
                <button 
                  onClick={() => setIsOnline(true)}
                  className="mt-4 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                >
                  连接网络
                </button>
              )}
            </div>
          )}
        </motion.div>

        {/* 下载提示 */}
        <AnimatePresence>
          {!isOnline && (
            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 20 }}
              className="mt-6 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-800 rounded-xl p-4"
            >
              <div className="flex flex-col md:flex-row md:items-start gap-3">
                <WifiOff className="h-5 w-5 text-yellow-400 mr-2 flex-shrink-0 mt-0.5" />
                <div>
                  <h3 className="text-sm font-medium text-yellow-800 dark:text-yellow-300">
                    离线模式
                  </h3>
                  <p className="text-sm text-yellow-700 dark:text-yellow-400 mt-1">
                    当前处于离线模式，无法下载新内容。请连接网络后重试。
                  </p>
                  <button
                    onClick={() => setIsOnline(true)}
                    className="mt-3 inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                  >
                    连接网络 <ArrowRight className="h-3.5 w-3.5 ml-1" />
                  </button>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        {/* 提示信息 */}
        <motion.div 
          variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }}
          initial="hidden"
          animate={controls}
          transition={{ duration: 0.5, delay: 0.6 }}
          className="mt-6 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4"
        >
          <div className="flex flex-col md:flex-row md:items-start gap-3">
            <Info className="h-5 w-5 text-blue-400 mr-2 flex-shrink-0 mt-0.5" />
            <div>
              <h3 className="text-sm font-medium text-blue-800 dark:text-blue-300">
                离线内容使用提示
              </h3>
              <p className="text-sm text-blue-700 dark:text-blue-400 mt-1">
                下载的离线内容将保存在设备本地，建议定期清理不常用的内容以释放存储空间。
              </p>
              <button
                onClick={() => { window.location.href = '/settings#offline'; }}
                className="mt-3 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 inline-flex items-center"
              >
                管理离线内容设置 <ExternalLink className="h-3 w-3 ml-1" />
              </button>
            </div>
          </div>
        </motion.div>
      </div>
    </div>
  );
};

export default OfflineContentPage;